<template>
    <div class="virtualHtml">
        <div class="contTop">
            <div class="imgs"><img src="@/assets/images/ba.jpg" alt=""></div>
            <div class="cont">
                <div class="box80">
                    <div class="font24">VIRTUAL LAMP TESTING TOOL</div>
                    <div class="font70">虚拟试灯工具</div>
                    <span class="xian"></span>
                    <div class="font30">足不出户即可查看真实光照数据和效果</div>
                    <el-link @click="searchDownload()" class="font18">查询下载</el-link>
                
                </div>
            </div>
            <div class="cont2">
                <div class="lt">
                    <span>处理器：i5及以上</span>
                    <span>内存：8G及以上</span>
                    <span>硬盘：2G以上空闲空间</span>
                    <span>显卡：GTX1050及以上</span>
                    <span>操作系统：Windows 7 SP1 64 bit 或 Windows 10 64 bit</span>
                </div>
                <div class="rt">
                    配置要求
                </div>
            </div>
        </div>
        <div class="virtualHtml_one">
            <div class="box80">
                <div class="font48">
                    <p class="font24">EFFICIENCY AND COST</p>
                    <p>优化试灯的效率和成本</p>
                </div>
                <el-row :gutter="50">
                    <el-col :span="8">
                        <div class="cont">
                            <p>在软件中复现理想环境<br/>便于设计师快速选灯<br/>大幅提升设计效率</p>
                            <div class="imgs">
                                <img src="@/assets/images/1.jpg" alt="">
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="cont">
                            <p>相比于传统的现场试灯<br/>可节约试灯的人力物力成本</p>
                            <div class="imgs">
                                <img src="@/assets/images/2.jpg" alt="">
                                <img src="@/assets/images/1.gif" alt="">
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="cont">
                            <p>涵盖大量的灯具和材质<br/>确保实际应用的覆盖率</p>
                            <div class="imgs">
                                <img src="@/assets/images/3.jpg" alt="">
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="virtualHtml_two">
            <div class="box80">
                <el-row :gutter="20">
                    <el-col :span="16">
                        <div class="font48">
                            <p class="font24">REAL PRESENTATION</p>
                            <p>真实呈现 所见即所得</p>
                        </div>
                        <div class="cont">
                            <p>▪ 基于真实灯具和材质的物理数据，确保模拟准确性</p>
                            <p>▪ 实时呈现模拟结果，所见即所得</p>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <img src="@/assets/images/4_16.png" alt="">
                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="virtualHtml_san">
            <div class="box80">
                <div class="imgs"><img src="@/assets/images/2.gif" alt=""></div>
                <el-link @click="gotoPdf()" class="font24">浏览操作说明</el-link>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
        }
    },
    methods: {
        searchDownload(){
            location.href=this.ImgPath + 'static/real/vtlight/LampOnline.rar'
            // var token = localStorage.getItem('token')
            // var refreshToken = localStorage.getItem('refreshToken')
            // var expiryTime = localStorage.getItem("expiryTime")
            // var isexpiryTime = expiryTime != null && new Date().getTime() < expiryTime
            // if(token && isexpiryTime){
            //     location.href=this.ImgPath + 'static/real/vtlight/LampOnline.rar'
            // }else{
            //     this.$router.push('login')
            // }
            // console.log("need login")
        },
        gotoPdf(){
            var token = localStorage.getItem('token')
            var refreshToken = localStorage.getItem('refreshToken')
            var expiryTime = localStorage.getItem("expiryTime")
            var isexpiryTime = expiryTime != null && new Date().getTime() < expiryTime
            if(token && isexpiryTime){
                window.open(this.ImgPath + 'static/real/vtlight/虚拟试灯操作手册.pdf',"_blank")
                
            }else{
                this.$router.push('login')
            }
            console.log("need login")
        }
    },
    created(){
    }
}

</script>
<style scoped  rel="stylesheet/scss" lang="scss">
.virtualHtml{
    padding-top: 88px;
    .contTop{
        position: relative;
        .cont{
            position: absolute;
            width: 100%;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            .font24{
                color: rgba(238, 238, 238, 0.5);
                margin-bottom: 10px;
                font-family: Roboto;
            }
            .font70{
                color: #eeeeee;
                margin-bottom: 0.5rem;
                line-height: 1;
                font-family: 'Roboto1'
            }
            .xian{
                width: 100px;
                height: 1px;
                display: inline-block;
                background: #ffb82a;
            }
            .font30{
                color: #eeeeee;
                margin-bottom: 3rem;
                margin-top: 3rem;
            }
            .el-link{
                padding: 15px 50px;
                text-align: center;
                background-color: #ffb82a;
                border-radius: 30px;
                overflow: hidden;
                color: #eeeeee;
                text-decoration: none;
                &:hover::after{
                    display: none;
                }
            }
        }
        .cont2{
            position: absolute;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 184, 42, 0.08);
            // padding-right: 60px;
            .rt{
                background-color: #ffb82a;
                width: 60px;
                text-align: center;
                color: #ffffff;
                font-size: 24px;
                float: right;
                padding: 10px;
                line-height: 1.2;
            }
            .lt{
                width: 480px;
                padding: 30px 40px;
                float: left;
                span{
                    width: 190px;
                    color: #eeeeee;
                    display: inline-block;
                    &:last-child{
                        width: 100%;
                    }
                }
            }
        }
    }
    .virtualHtml_one{
        padding: 100px 0;
        .font48{
            margin-bottom: 50px;
            position: relative;
            color: #333333;
            line-height: 1;
            padding: 8px 0;
            &::after{
                content: '';
                width: 8px;
	            height: 100%;
	            background-color: #ffb82a;
                position: absolute;
                left: -36px;
                top: 0;
            }
            .font24{
                color: #333333;
                margin-bottom: 10px;
                font-family: Roboto;
            }
        }
        .el-col{
            .cont{
                background-color: #ffffff;
	            box-shadow: 0px 10px 40px 0px rgba(140, 115, 88, 0.24);
	            border-radius: 10px;
                padding: 40px 5%;
                text-align: center;
                height: 354px;
                p{
                    color: #333333;
                    line-height: 1.8em;
                }
            }
            &:nth-child(1){
                .cont{
                    padding: 40px 40px;
                    p{
                        margin-bottom: 30px;
                    }
                    img{height: 140px;}
                }
            }
            &:nth-child(2){
                .cont{
                    padding: 40px 30px;
                    p{
                        margin-bottom: 54px;
                    }
                    .imgs{
                        width: 100%;
                        height: 140px;
                        display: inline-block;
                        img{
                            width: 48%;
                            float: left;
                            &:last-child{
                                margin-left: 4%;
                            }
                        }
                    }
                }
            }
            &:nth-child(3){
                .cont{
                    padding: 40px 70px;
                    p{
                         margin-bottom: 30px;
                    }
                    img{height:194px}
                }
            }
        }
    }
    .virtualHtml_two{
        background: url(../../assets/images/5.png) no-repeat center;
        background-size: cover;
        padding: 80px 0;
         .font48{
            margin-bottom: 10px;
            position: relative;
            color: #eeeeee;
            line-height: 1;
            padding: 8px 0;
            &::after{
                content: '';
                width: 8px;
	            height: 100%;
	            background-color: #ffb82a;
                position: absolute;
                left: -36px;
                top: 0;
            }
            .font24{
                color: #eeeeee;
                margin-bottom: 10px;
                font-family: Roboto;
            }
        }
        .cont{
            margin-top: 130px;
            p{
                color: #eeeeee;
                font-size: 22px;
                &:last-child{
                    margin-top: 40px;
                }
            }
        }
    }
    .virtualHtml_san{
        padding: 100px 0;
        .imgs{
            margin-bottom: 70px;
        }
        a{
            width: 220px;
            height: 40px;
            background-color: #ffb82a;
            border-radius: 30px;
            color: #fff;
            display: block;
            text-align: center;
            line-height: 40px;
            margin:  auto;
        }
    }
}
@media (max-width: 1400px) {
.virtualHtml .virtualHtml_two .cont {
    margin-top: 112px;
}
}
@media (max-width: 1300px) {
.virtualHtml .virtualHtml_two .cont {
    margin-top: 100px;
}
}
@media (max-width: 1200px) {
.virtualHtml .virtualHtml_two .cont {
    margin-top: 80px;
}
}
</style>